<template>
  <div class="orders-container">
    <van-nav-bar
      title="我的订单"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 订单类型标签页 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab v-for="tab in tabs" :key="tab.type" :title="tab.text">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="order-list">
              <div v-for="order in orderList" :key="order.id" class="order-item">
                <div class="order-header">
                  <span class="order-no">订单号：{{ order.orderNo }}</span>
                  <span class="order-status" :style="{ color: order.statusColor }">{{ order.statusText }}</span>
                </div>
                <div class="order-content">
                  <img :src="order.courseImage" :alt="order.courseName">
                  <div class="course-info">
                    <div class="course-name">{{ order.courseName }}</div>
                    <div class="course-price">
                      <span class="price">¥{{ order.price }}</span>
                      <span class="count">x{{ order.count }}</span>
                    </div>
                  </div>
                </div>
                <div class="order-footer">
                  <span class="total">实付款：<span class="amount">¥{{ order.totalAmount }}</span></span>
                  <div class="action-buttons">
                    <template v-if="order.status === 'unpaid'">
                      <van-button size="small" @click="onCancelOrder(order)">取消订单</van-button>
                      <van-button size="small" type="primary" @click="onPayOrder(order)">立即支付</van-button>
                    </template>
                    <template v-else-if="order.status === 'unstarted'">
                      <van-button size="small" type="primary" @click="onStartLearning(order)">开始学习</van-button>
                    </template>
                    <template v-else-if="order.status === 'learning'">
                      <van-button size="small" type="primary" @click="onContinueLearning(order)">继续学习</van-button>
                    </template>
                    <template v-else>
                      <van-button size="small" plain type="primary" @click="onReview(order)">评价</van-button>
                      <van-button size="small" type="primary" @click="onRepurchase(order)">再次购买</van-button>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()
const route = useRoute()

// 标签页配置
const tabs = [
  { text: '全部', type: 'all' },
  { text: '待付款', type: 'unpaid' },
  { text: '待开课', type: 'unstarted' },
  { text: '学习中', type: 'learning' },
  { text: '已完成', type: 'completed' }
]

// 列表状态
const activeTab = ref(0)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const orderList = ref([])

// 模拟订单数据
const mockOrders = [
  {
    id: 1,
    orderNo: 'DD20230801001',
    status: 'unpaid',
    statusText: '待付款',
    statusColor: '#ee0a24',
    courseName: '高中数学提高班 - 函数与导数专题',
    courseImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '299.00',
    count: 1,
    totalAmount: '299.00'
  },
  {
    id: 2,
    orderNo: 'DD20230801002',
    status: 'unstarted',
    statusText: '待开课',
    statusColor: '#ff976a',
    courseName: '英语口语训练营 - 零基础到流利表达',
    courseImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '399.00',
    count: 1,
    totalAmount: '399.00'
  },
  {
    id: 3,
    orderNo: 'DD20230801003',
    status: 'learning',
    statusText: '学习中',
    statusColor: '#07c160',
    courseName: 'Python编程基础 - 从入门到实践',
    courseImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '499.00',
    count: 1,
    totalAmount: '499.00'
  },
  {
    id: 4,
    orderNo: 'DD20230801004',
    status: 'completed',
    statusText: '已完成',
    statusColor: '#969799',
    courseName: '高考物理冲刺班 - 重难点突破',
    courseImage: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '599.00',
    count: 1,
    totalAmount: '599.00'
  }
]

// 根据路由参数设置初始标签
onMounted(() => {
  const { type } = route.query
  if (type) {
    const index = tabs.findIndex(tab => tab.type === type)
    if (index !== -1) {
      activeTab.value = index
    }
  }
})

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      orderList.value = []
      refreshing.value = false
    }

    // 模拟加载更多数据
    orderList.value.push(...mockOrders)
    loading.value = false

    // 模拟数据加载完成
    if (orderList.value.length >= 8) {
      finished.value = true
    }
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 取消订单
const onCancelOrder = (order) => {
  showDialog({
    title: '提示',
    message: '确定要取消该订单吗？',
    theme: 'round-button'
  }).then(() => {
    // TODO: 调用取消订单接口
    showToast('订单已取消')
    onRefresh()
  })
}

// 支付订单
const onPayOrder = (order) => {
  // TODO: 调用支付接口
  showToast('正在跳转支付...')
}

// 开始学习
const onStartLearning = (order) => {
  router.push(`/course/${order.courseId}`)
}

// 继续学习
const onContinueLearning = (order) => {
  router.push(`/course/${order.courseId}`)
}

// 评价课程
const onReview = (order) => {
  router.push(`/review/${order.id}`)
}

// 再次购买
const onRepurchase = (order) => {
  router.push(`/course/${order.courseId}`)
}
</script>

<style lang="scss" scoped>
.orders-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .order-list {
    padding: 12px;
  }

  .order-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .order-no {
        font-size: 12px;
        color: #969799;
      }

      .order-status {
        font-size: 13px;
        font-weight: 500;
      }
    }

    .order-content {
      display: flex;
      margin-bottom: 12px;

      img {
        width: 80px;
        height: 60px;
        border-radius: 4px;
        object-fit: cover;
        margin-right: 12px;
      }

      .course-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .course-name {
          font-size: 14px;
          color: #323233;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .course-price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 14px;
            color: #ee0a24;
            font-weight: 500;
          }

          .count {
            font-size: 12px;
            color: #969799;
          }
        }
      }
    }

    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #f5f5f5;

      .total {
        font-size: 12px;
        color: #323233;

        .amount {
          font-size: 14px;
          font-weight: 500;
          color: #ee0a24;
        }
      }

      .action-buttons {
        display: flex;
        gap: 8px;

        .van-button {
          padding: 0 12px;
        }
      }
    }
  }
}
</style>
